<template lang="html">
    <div>
        <div class="L3-head">
            实有人口 78908
        </div>
        <div>
            <div id="syrk" style="float:left;width:100%;height: 266px"></div>
            <!-- <v-chart :options="options" class="" /> -->
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import echarts from 'echarts'
export default {
  data() {
    return {
      options : {
        
      },

    }
  },
  props: {

  },
  computed: {
    
  },
  components: {

  },
  created: function() {
    
  },
  mounted() {
      this.initsyrk();
  },
  watch: {
    
  },
  methods: {
      initsyrk(){
          var myChart = echarts.init(document.getElementById('syrk'));
          myChart.setOption({
            tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            left:'5%',
            top: '5px',
            data: ['常住人口', '流动人口', '其他人口'],
            "textStyle": {
                "fontSize": 13,
                "color": "white",
            }
        },
        graphic: [{ //环形图中间添加文字
            type: 'text', //通过不同top值可以设置上下显示
            left: '60%',
            top: '72%',
            style: {
                text: '34243',
                textAlign: 'center',
                fill: 'white', //文字的颜色
                width: 30,
                height: 30,
                fontSize: 14,
                fontWeight: 'bold',
                fontFamily: "Microsoft YaHei"
            }
        }],
        series: [
            {
                name: '人口占比',
                type: 'pie',
                radius: ['40%', '60%'],
                label: {
                    normal: {
                        formatter: "{b}\n{c}",
                        // backgroundColor: '#eee',
                        // borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            // a: {
                            //     color: '#999',
                            //     lineHeight: 22,
                            //     align: 'center'
                            // },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data: [
                    { value: 15699, name: '常住人口' },
                    { value: 17106, name: '流动人口' },
                    { value: 46103, name: '其他人口' },
                ],
                color: ["#66D0F8", "#EA6A39", "#D3FB89", "#9099f1"],
                center: ["63%", "40%"],
            }
        ]
          });
      }
  }
}
</script>
<style scoped>
    .L3-head {
        font-size: 30px;
        color:#0096ff;
        margin-left: 40px;
        margin-top: 20px;
        font-weight: bolder;
        font-style: italic;
    }
</style>